Getting Started

@nano_kit/router is a small and powerful router for @nano_kit/store state manager.

• Small. Around 2 kB (minified & brotlied). Zero dependencies except @nano_kit/store.
• Type-safe. Full TypeScript support with type inference for routes and parameters.
• Signal-based. Built on top of @nano_kit/store’s reactive signals for automatic UI updates.
• Flexible. Supports nested layouts, parameterized routes, optional parameters, wildcards, and query parameters.
• SSR-ready. Works seamlessly with server-side rendering.

Installation

Install the package using your favorite package manager:

pnpm

pnpm add @nano_kit/store @nano_kit/router

Yarn

yarn add @nano_kit/store @nano_kit/router

npm

npm install @nano_kit/store @nano_kit/router

Quick Start

Here is a minimal example demonstrating navigation, routing, and reactive page rendering:

import { effect } from '@nano_kit/store'
import { browserNavigation, router, page, layout, notFound } from '@nano_kit/router'

/* Define your routes */
const routes = {
  home: '/',
  user: '/users/:id',
  userPosts: '/users/:id/posts',
  admin: '/admin/*'
}

/* Setup navigation with browser history */
const [$location, navigation] = browserNavigation(routes)

/* Define page components */
const HomePage = () => 'Welcome Home!'
const UserPage = () => `User ID: ${$location().params.id}`
const UserPostsPage = () => `Posts for User: ${$location().params.id}`
const AdminLayout = ($page) => `Admin Layout: ${$page()}`
const AdminPage = () => `Admin Page: ${$location().params.wildcard || 'dashboard'}`
const NotFoundPage = () => 'Page Not Found'

/* Create router with pages and layouts */
const [$page] = router($location, [
  page('home', HomePage),
  page('user', UserPage),
  page('posts', UserPostsPage),
  layout(AdminLayout, [
    page('admin', AdminPage)
  ]),
  notFound(NotFoundPage)
], composeLayoutFunction)

/* React to route changes (mounting $page triggers router) */
const unsub = effect(() => {
  const PageComponent = $page()

  console.log('Current page:', PageComponent())
  // Render PageComponent in your app
})
// Current page: Welcome Home!

/* Navigate programmatically */
navigation.push('/users/123')
// Current page: User ID: 123

navigation.push('/admin/settings/profile')
// Current page: Admin Layout: Admin Page: settings/profile

navigation.back()
// Current page: User ID: 123

/* Cleanup */
unsub()

Next Steps

Now that you have the basics, explore more advanced features:

• Core Concepts – Learn about @nano_kit/router in depth.
• Advanced – Advanced routing patterns and techniques.
• React Router – React integration for @nano_kit/router.